import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function NewsUpdates() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.newsUpdates')} - 豆豆Pay`,
    description: t('seo.pages.newsUpdates.description')
  });
  const hreflangTags = generateHreflangTags('/investor-relations/news');
  const structuredData = generateStructuredData(seoConfig, 'website');
  
  // 模拟新闻动态数据
  const newsItems = [
    {
      id: 1,
      title: t('investor.news1Title'),
      date: '2024-09-01',
      category: t('investor.financialNews'),
      summary: t('investor.news1Summary'),
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=financial%20news%2C%20stock%20market%2C%20business%20announcement&sign=2002fdd14b5d4b299a01817bdcf76108'
    },
    {
      id: 2,
      title: t('investor.news2Title'),
      date: '2024-08-15',
      category: t('investor.businessNews'),
      summary: t('investor.news2Summary'),
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=business%20partnership%2C%20signing%20ceremony%2C%20executives%20shaking%20hands&sign=adb6221a7ccf3f5dc422f6bc2a9868a7'
    },
    {
      id: 3,
      title: t('investor.news3Title'),
      date: '2024-07-22',
      category: t('investor.productNews'),
      summary: t('investor.news3Summary'),
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=new%20product%20launch%2C%20technology%20conference%2C%20presentation&sign=794ae75c8c294db4da72ae4aa2c4fa32'
    },
    {
      id: 4,
      title: t('investor.news4Title'),
      date: '2024-06-30',
      category: t('investor.financialNews'),
      summary: t('investor.news4Summary'),
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=quarterly%20results%2C%20financial%20report%2C%20growth%20chart&sign=b1c59545d3a41120930a23b3666a63a0'
    },
    {
      id: 5,
      title: t('investor.news5Title'),
      date: '2024-06-10',
      category: t('investor.leadershipNews'),
      summary: t('investor.news5Summary'),
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&executive%20team%2C%20board%20of%20directors%2C%20business%20meeting&sign=5e6f7g8h9i0j1k2l3m4n'
    }
  ];
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
         {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-gray-50 to-gray-900">     <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
                {t('header.newsUpdates')}
              </h1>
              <div className="w-20 h-1 bg-blue-400 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-300 leading-relaxed">
                {t('investor.newsUpdatesDesc')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 新闻动态列表 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">

              
              {/* 新闻分类标签 */}
              <div className="mb-12">
                <div className="flex flex-wrap gap-3">
                  <button className="px-5 py-2 bg-gray-900 text-white rounded-full text-sm font-medium">
                    {t('investor.allNews')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('investor.financialNews')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('investor.businessNews')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('investor.productNews')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('investor.leadershipNews')}
                  </button>
                </div>
              </div>
              
              {/* 新闻列表 */}
              <div className="space-y-10">
                {newsItems.map((news) => (
                  <motion.article
                    key={news.id}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: (news.id - 1) * 0.05 }}
                    viewport={{ once: true }}
                    className="group"
                  >
                    <div className="md:flex gap-8">
                      <div className="md:w-2/5 mb-6 md:mb-0 overflow-hidden rounded-xl">
                        <img 
                          src={news.imageUrl} 
                          alt={news.title} 
                          className="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-105"
                        />
                      </div>
                      <div className="md:flex-1">
                        <div className="flex flex-wrap items-center gap-4 mb-4">
                          <span className="text-sm font-medium text-gray-500">
                            {news.date}
                          </span>
                          <span className="px-3 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded-full">
                            {news.category}
                          </span>
                        </div>
                        <h3 className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-gray-700 transition-colors">
                          {news.title}
                        </h3>
                        <p className="text-gray-600 mb-6 leading-relaxed">
                          {news.summary}
                        </p>
                        <a 
                          href="#" 
                          className="inline-flex items-center text-gray-900 font-medium hover:text-gray-700 transition-colors"
                        >
                          {t('investor.readMore')}
                          <i className="fa-solid fa-arrow-right ml-2 text-sm"></i>
                        </a>
                      </div>
                    </div>
                    {news.id !== newsItems.length && (
                      <div className="mt-10 border-t border-gray-100"></div>
                    )}
                  </motion.article>
                ))}
              </div>
              
               {/* 加载更多 */}
               <div className="mt-16 flex justify-center">
                 <button className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium rounded-md transition-colors shadow-sm hover:shadow">
                   <i className="fa-solid fa-refresh mr-2"></i>
                   {t('investor.loadMore')}
                 </button>
               </div>
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}